/* eslint-disable @typescript-eslint/no-unused-vars */
// 月安全检查
import { Button, Dialog, Steps, Sticky } from "@taroify/core";
import Taro from "@tarojs/taro";
import PageLayout from "@/layout/PageLayout";
import { ArrowRight } from "@taroify/icons";
import { View } from "@tarojs/components";
import React, { useState } from "react";
import CheckReport from "../CheckReport";
import SelfExaminaConclu from "../SelfExaminaConclu";
import InfoSubmiter from "../InfoSubmiter";

const MonthSafelyCheck: React.FC = () => {
  const [curStep, setCurStep] = useState<number>(0);

  // 提交确认Dialog
  const [showConfirmDialog, setShowConfirmDialog] = useState<boolean>(false);

  // 签名图片
  const [signatureImg, setSignatureImg] = useState<{
    image: string;
    canvas: HTMLCanvasElement | null;
  }>();

  /**
   *  提交
   */
  const onSubmitHandler = () => {
    Taro.redirectTo({
      url: "/pages/IntelFilling/components/MonthReport/index?showTabType=1",
    });
  };

  return (
    <View className="w-full">
      <View className="w-full">
        <Sticky position="top">
          <Steps value={curStep}>
            <Steps.Step icon={<ArrowRight />}>检查填报</Steps.Step>
            <Steps.Step icon={<ArrowRight />}>自检结论</Steps.Step>
            <Steps.Step icon={<ArrowRight />}>信息提交</Steps.Step>
          </Steps>
        </Sticky>
      </View>
      <PageLayout>
        <View className="w-full">
          {curStep === 0 ? (
            <View className="w-full pt-4 pb-8">
              <CheckReport />
            </View>
          ) : curStep === 1 ? (
            <View className="w-full pt-4 pb-8">
              <SelfExaminaConclu setSignatureImg={setSignatureImg} />
            </View>
          ) : (
            <View className="w-full pt-4 pb-8">
              <InfoSubmiter signatureImg={signatureImg} />
            </View>
          )}
        </View>
      </PageLayout>
      <Sticky position="bottom" offsetBottom={20}>
        <View className="flex flex-row items-center justify-between gap-4 px-8 flex-nowrap">
          {curStep === 0 ? (
            <>
              <View className="flex-1">
                <Button color="primary" className="w-full">
                  暂存
                </Button>
              </View>
              <View className="flex-1">
                <Button
                  color="primary"
                  className="w-full"
                  onClick={() => setCurStep(1)}
                >
                  确认并下一步
                </Button>
              </View>
            </>
          ) : curStep === 1 ? (
            <>
              <View className="flex-1">
                <Button
                  color="primary"
                  className="w-full"
                  onClick={() => setCurStep(0)}
                >
                  上一步
                </Button>
              </View>
              <View className="flex-1">
                <Button
                  color="primary"
                  className="w-full"
                  onClick={() => setCurStep(2)}
                >
                  保存并下一步
                </Button>
              </View>
            </>
          ) : (
            <>
              <View className="flex-1">
                <Button
                  color="primary"
                  className="w-full"
                  onClick={() => setCurStep(1)}
                >
                  上一步
                </Button>
              </View>
              <View className="flex-1">
                <Button
                  color="primary"
                  className="w-full"
                  onClick={() => setShowConfirmDialog(true)}
                >
                  提交
                </Button>
              </View>
            </>
          )}
        </View>
      </Sticky>
      <Dialog open={showConfirmDialog} onClose={setShowConfirmDialog}>
        <Dialog.Header>提交</Dialog.Header>
        <Dialog.Content>确认要提交吗?</Dialog.Content>
        <Dialog.Actions>
          <Button onClick={() => setShowConfirmDialog(false)}>取消</Button>
          <Button onClick={onSubmitHandler}>确认</Button>
        </Dialog.Actions>
      </Dialog>
    </View>
  );
};

export default MonthSafelyCheck;
